<template>
  <div :class="{'search-open': searchStatus, 'search-close': !searchStatus}" class="top-search-wrap" >
   	<div class="tsw-inner">
	   	<i class="top-search-close glyphicon glyphicon-menu-left" @click="searchClose"></i>
      <input type="text" id="search-input" v-model="searchContent"/>
   	</div>
  </div>
</template>

<script>
import EventListener from '../utils/event-listener.js'
export default {
  data () {
    return {
      searchContent: ''
    }
  },
  props: {
    searchStatus: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    searchClose () {
      this.searchStatus = false
      this.searchContent = ''
    }
  },
  watch: {
    searchStatus () {
      if (this.searchStatus) {
        this.$el.querySelector('#search-input').focus()
      }
    }
  },
  ready () {
    const el = this.$el
    this.closeEvent = EventListener.listen(window, 'click', (e) => {
      if (!el.contains(e.target) && this.searchStatus && e.target.tagName === 'BODY') this.searchClose()
    })
  },
  beforeDestroy () {
    if (this.closeEvent) this.closeEvent.remove()
  }
}
</script>

<style lang="less">
@import '../vendors/bootstrap/less/mixins';
@import '../vendors/bootstrap/less/variables';
@import '../less/variables';

&.search-open {
  top: 0;
  .opacity(1);
}

&.search-close {
  top: -65px;
  .opacity(0);
}

.top-search-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  height: @header-height;
  background: #fff;
  .transition(all);
  .transition-duration(300ms);
  z-index: 10;

  input[type="text"] {
      border: 0;
      height: 40px;
      padding: 0 10px 0 55px;
      font-size: 18px;
      width: 500px;
      border-radius: 2px;
      background-color: darken(#F7F7F7, 3%);
      width: 100%;
  }

  .top-search-close {
      position: absolute;
      top: 15px;
      font-size: 23px;
      font-style: normal;
      width: 45px;
      text-align: center;
      border-radius: 2px 0px 0px 2px;
      cursor: pointer;
      left: 15px;
      height: 40px;
      padding-top: 9px;

      &:hover {
          background-color: darken(#F7F7F7, 8%);
      }

      @media (max-width: @screen-xs-max) {
          right: 7px;
      }
  }

  .tsw-inner {
      position: relative;
      padding: 15px;
      max-width: 700px;
      display: block;
      margin: 0 auto;
  }
}
</style>